<template>
  <div class="login">
    <div class="container fix input-contain pb70">
      <img src="../assets/logonimg_03.jpg" alt="" class="flo-left left-img">
      <div class="flo-right bg-c-fff login-box">
        <h2 class="login-box-title">
          <span class="dib cup" v-bind:class="{active:login==='lawyer'}" @click="tab('lawyer')">律师登录</span>
          <span class="dib cup" v-bind:class="{active:login==='lawyerFirm'}" @click="tab('lawyerFirm')">律师事务所登录</span>
        </h2>
        <form @submit.prevent="onLawyerSubmit" v-show="login==='lawyer'">
          <ul class="input-box">
            <li><span>用户名</span>
              <input type="text" placeholder="请输入用户名/手机号" class="input-css input-w1" v-model='lawyerName'>
            </li>
            <li><span>密码</span>
              <input type="password" placeholder="请输入密码" class="input-css input-w1" v-model='lawyerPassword'>
              <p class="fix">
                <input type="checkbox" class="flo-left remember" v-model="lawyerRemember">记住用户名
                <button type="button" class="flo-right" @click="onResetPassword">忘记密码</button>
              </p>
            </li>
            <li class="login-btn tc">
              <button type="submit" class="button-css cup small-btn">律师登录</button>
              <button type="button" @click="lawyerRegister" class="button-css small-btn">律师注册</button>
            </li>
          </ul>
        </form>
        <form @submit.prevent="onLawyerFirmSubmit" v-show="login==='lawyerFirm'">
          <ul class="input-box">
            <li><span>用户名</span>
              <input type="text" placeholder="请输入用户名/手机号" class="input-css input-w1" v-model='companyName'>
            </li>
            <li><span>密码</span>
              <input type="password" placeholder="请输入密码" class="input-css input-w1" v-model='companyPassword'>
              <p class="fix">
                <input type="checkbox" class="flo-left remember" v-model="companyRemember">记住用户名
                <button type="button" class="flo-right" @click="onResetPassword">忘记密码</button>
              </p>
            </li>
            <li class="login-btn tc">
              <button type="submit" class="button-css cup small-btn">律师事务所登录</button>
              <button type="button" @click="lawfirmRegister" class="button-css small-btn">律师事务所注册</button>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  components: {},
  data() {
    return {
      login: 'lawyer',
      lawyerName: '',
      lawyerPassword: '',
      lawyerRemember: false,
      companyName: '',
      companyPassword: '',
      companyRemember: false
    }
  },
  created() {
    if (localStorage.lawyerName) {
      this.lawyerName = localStorage.lawyerName
      this.lawyerRemember = true
    }
    if (localStorage.companyName) {
      this.companyName = localStorage.companyName
      this.companyRemember = true
    }
  },
  methods: {
    tab(name) {
      this.login = name
    },
    onLawyerSubmit() {
      if (!this.lawyerName) {
        this.$toasted.show('用户名不能为空')
        return
      }
      if (!this.lawyerPassword) {
        this.$toasted.show('密码不能为空')
        return
      }
      if (this.lawyerRemember) {
        localStorage.lawyerName = this.lawyerName
      } else {
        localStorage.lawyerName = ''
      }
      this.$http.post('/member/login', {
        account: this.lawyerName,
        password: this.lawyerPassword,
        memberType: 2
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$store.dispatch('getLawyerInfo').then((data) => {
            if (data.data.httpCode === 200) {
              this.$toasted.show('登录成功')
              if (this.$store.state.lawyerLoginData.isReviewed === 0 || this.$store.state.lawyerLoginData.isReviewed === 2) {
                this.$router.push('/to-examine')
              } else {
                this.$router.push('/welcome')
              }
            } else {
              this.$toasted.show(data.data.msg)
            }
          }, err => {
            console.log(err)
          })
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(() => {
        this.$toasted.show('网络出错')
      })
    },
    onLawyerFirmSubmit() {
      if (!this.companyName) {
        this.$toasted.show('用户名不能为空')
        return
      }
      if (!this.companyPassword) {
        this.$toasted.show('密码不能为空')
        return
      }
      if (this.companyRemember) {
        localStorage.companyName = this.companyName
      } else {
        localStorage.companyName = ''
      }
      this.$http.post('/member/login', {
        account: this.companyName,
        password: this.companyPassword,
        memberType: 3
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$store.dispatch('getLawfirmInfo').then((data) => {
            if (data.data.httpCode === 200) {
              this.$toasted.show('登录成功')
              if (this.$store.state.lawfirmLoginData.isReviewed === 0 || this.$store.state.lawfirmLoginData.isReviewed === 2) {
                this.$router.push('/to-examine')
              } else {
                this.$router.push('/welcomelawfirm')
              }
            } else {
              this.$toasted.show(data.data.msg)
            }
          }, err => {
            console.log(err)
          })
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(() => {
        this.$toasted.show('网络出错')
      })
    },
    lawyerRegister() {
      this.$router.push('/lawyer-register')
    },
    lawfirmRegister() {
      this.$router.push('/law-firm-register')
    },
    onResetPassword() {
      this.$router.push('/reset-password' + '?name=' + this.login)
    }
  }
}

</script>
<style type="text/css" scoped>
.login .left-img {
  width: 554px;
  height: 440px;
}

.login-box-title {
  color: #a5a5a5;
  line-height: 40px;
  font-weight: normal;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
}

.login-box-title span {
  padding: 0 13px;
}

.login-box-title span.active {
  background-color: #01378c;
  color: #fff;
  font-size: 16px;
}

form {
  height: 399px;
}

.login .input-box {
  padding: 20px 0 45px 0;
}

.login-box {
  width: 600px;
}

.login-box li:nth-of-type(1) {
  margin-top: 60px;
}

.login-box li:nth-of-type(2) {
  margin-top: 50px;
}

.login-box li:nth-of-type(3) {
  margin-top: 40px;
}

.login-btn {
  padding-left: 34px;
}

.login .input-box button.flo-right {
  font-size: 12px;
  line-height: 26px;
}

</style>
